<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta property="og:image" content="./social.jpg" />
        <title>Rainy Window</title>
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <link rel="stylesheet" href="styles/style.css" />
    </head>
    <body>
        <div id="container"></div>
        <input id="filePicker" type="file" accept=".jpg, .jpeg, .png, .mp4, .webm" style="visibility: hidden" />
        <div id="progressbar" class="indeterminate-progress-bar">
            <div class="indeterminate-progress-bar__progress"></div>
        </div>
        <script src="./js/dat.gui.min.js"></script>
        <script src="./js/three.min.js"></script>
        <script src="./js/script.js"></script>
        <script>
            //threejs scene first run
            let background = document.getElementById("container");
            const progress = document.getElementById("progressbar");
            document.addEventListener("sceneLoaded", () => {
                if (background.style.opacity == 0) setVisible(background);
                progress.style.display = "none";
            });
            async function setVisible(element) {
                for (let val = 0; val < 1; val += 0.1) {
                    element.style.opacity = val;
                    await new Promise((r) => setTimeout(r, 75));
                }
            }
        </script>
    </body>
</html>